<template>
  <view>
    <view class="container">
      <van-calendar
          title="日历"
          :poppable="false"
          :show-confirm="false"
          :show-current-month="true"
          :min-date="minDate"
          :max-date="maxDate"
          :row-height="36"
          :style="{ height: '330px' }"
          switch-mode="year-month"
          @confirm="onCalendarConfirm"
      />
    </view>
    <view>
      <van-divider>打卡记录</van-divider>
      <scroll-view
          scroll-y
          style="height: 300px"
          :scroll-top="recordScrollTop"
          :show-scrollbar="true"
          class="custom-green-scroll"
      >
      <van-empty v-if="checkedDates.length === 0" description="暂无打卡记录"/>
      <van-steps direction="vertical" :active="checkedDates.length">
        <van-step v-for="(date, index) in checkedDates" :key="index">
          <template #default>
            <view class="step-content">
              <view class="step-title">📅 已打卡</view>
              <view class="step-time">{{ formatDate(date.create_date) }}</view>
            </view>
          </template>
        </van-step>
      </van-steps>
    </scroll-view>
    </view>
  </view>
</template>

<script>
import api from '../../api/index'
import auth from '../../util/auth'

export default {
  data() {
    return {
      title: 'Hello',
      minDate: null,
      maxDate: null,
      specialDates: [],
      checkedDates: [],
      recordScrollTop: 0,

    }
  },
  onLoad() {
    auth.checkAuthAndRedirect(() => {
      this.setCurrentMonthRange()
      this.getUserAttendance()
    })
  },
  methods: {
    formatDate(dateString) {
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    // 日历确认事件（点击日期触发）
    onCalendarConfirm(date) {
      // 格式化为 YYYY-MM-DD
      const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      // 获取数据
      this.getUserAttendance({ date: formattedDate });
    },
    setCurrentMonthRange() {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth()
      const date = now.getDate()
      // 获取当前月的第一天
      // const firstDay = new Date(year, month, 1)
      // 当前日期的三个月前
      const threeMonthsAgo = new Date(year, month - 3, date)

      // 获取下个月第一天作为 maxDate（前一秒钟为本月最后一天）
      const nextMonthFirstDay = new Date(year, month + 1, 1)
      const lastDay = new Date(nextMonthFirstDay.getTime() - 1)

      this.minDate = threeMonthsAgo
      this.maxDate = lastDay
    },
    getUserAttendance(params = {}) {
      const tel = auth.getPhone();
      const queryParams = {
        tel: tel
      };
      if (params.date) {
        queryParams.date = params.date;
      }
      api.getUserAttendanceInfo(queryParams).then(res => {
        if (res.code === 200) {
          this.checkedDates = res.data;
          this.$nextTick(() => {
            this.recordScrollTop = 1;
            this.$nextTick(() => {
              this.recordScrollTop = 0;
            });
          });
        }
      });
    },

  }
}
</script>

<style>
/* 打卡历史 */
.custom-step .van-step__circle {
  background-color: #1989fa !important;
}

.step-content {
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.step-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.step-time {
  font-size: 14px;
  color: #666;
}

/* 日期固定 */
.container {
  position: relative;
}

.calendar-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: white;
}

/* 步骤条样式保持不变 */
.step-content {
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.step-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.step-time {
  font-size: 14px;
  color: #666;
}

/* 只在 H5 端生效，滚动条更粗且为绿色 */
.custom-green-scroll::-webkit-scrollbar {
  width: 12px;              /* 滚动条宽度加粗 */
  background: #e0f2f1;      /* 滚动条轨道背景色，可自定义 */
}
.custom-green-scroll::-webkit-scrollbar-thumb {
  background: #4caf50;      /* 滚动条滑块为绿色 */
  border-radius: 6px;       /* 圆角 */
}
.custom-green-scroll::-webkit-scrollbar-track {
  background: #e0f2f1;      /* 滚动条轨道背景色 */
  border-radius: 6px;
}
/* 兼容 Firefox */
.custom-green-scroll {
  scrollbar-width: thick;
  scrollbar-color: #4caf50 #e0f2f1;
}


</style>